{% extends "base.html" %}

{% block title %}工具箱 - 文本大小写转换{% endblock %}

{% block content %}
    <!-- 页面标题 -->
    <div class="bg-blue-600 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold">文本大小写转换</h1>
                    <p class="mt-2">快速转换文本的大小写格式，支持多种转换模式</p>
                </div>
                <div class="bg-white bg-opacity-20 p-4 rounded-lg hidden md:block">
                    <div class="flex space-x-2 text-sm">
                        <a href="{{ url_for('main.index') }}" class="hover:underline">首页</a>
                        <span>/</span>
                        <a href="#" class="hover:underline">文本工具</a>
                        <span>/</span>
                        <span class="font-medium">大小写转换</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="container mx-auto px-4 py-8">
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- 侧边栏工具列表 -->
            <div class="w-full lg:w-1/4">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-xl font-bold mb-6 text-gray-800">文本处理工具</h2>
                    <ul class="space-y-3">
                        <li>
                            <a href="{{ url_for('text_tools.text_converter') }}" class="flex items-center text-blue-600 font-medium">
                                <div class="w-8 text-center">
                                    <i class="fas fa-text-height"></i>
                                </div>
                                <span>大小写转换</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-blue-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-lock"></i>
                                </div>
                                <span>加密/解密</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-blue-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-exchange-alt"></i>
                                </div>
                                <span>文本比较</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-blue-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-random"></i>
                                </div>
                                <span>随机文本生成</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-blue-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-sort-numeric-down"></i>
                                </div>
                                <span>文本排序</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-blue-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-list-ol"></i>
                                </div>
                                <span>行号添加/删除</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-blue-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-search-plus"></i>
                                </div>
                                <span>文本查找/替换</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-blue-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-file-csv"></i>
                                </div>
                                <span>CSV/表格转换</span>
                            </a>
                        </li>
                    </ul>
                </div>
                
                <!-- 最近使用记录 -->
                <div class="bg-white rounded-lg shadow-md p-6 mt-6">
                    <h2 class="text-xl font-bold mb-4 text-gray-800">最近使用</h2>
                    <ul class="space-y-3">
                        <li>
                            <a href="{{ url_for('text_tools.text_converter') }}" class="flex items-center text-gray-600 hover:text-blue-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-text-height text-blue-500"></i>
                                </div>
                                <div class="flex-1">
                                    <span>大小写转换</span>
                                    <p class="text-xs text-gray-500">2分钟前</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="{{ url_for('dev_tools.json_formatter') }}" class="flex items-center text-gray-600 hover:text-blue-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-code text-purple-500"></i>
                                </div>
                                <div class="flex-1">
                                    <span>JSON格式化</span>
                                    <p class="text-xs text-gray-500">昨天</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="{{ url_for('image_tools.image_compress') }}" class="flex items-center text-gray-600 hover:text-blue-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-image text-green-500"></i>
                                </div>
                                <div class="flex-1">
                                    <span>图片压缩</span>
                                    <p class="text-xs text-gray-500">3天前</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- 主工具区域 -->
            <div class="w-full lg:w-3/4">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <!-- 工具说明 -->
                    <div class="mb-6">
                        <h2 class="text-xl font-bold text-gray-800 mb-3">文本大小写转换</h2>
                        <p class="text-gray-600">
                            将输入的文本快速转换为大写、小写、首字母大写等多种格式。适用于编辑文档、处理数据、编程等多种场景。
                        </p>
                    </div>
                    
                    <!-- 转换选项 -->
                    <div class="mb-6">
                        <form method="POST" action="{{ url_for('text_tools.text_converter') }}">
                            <div class="flex flex-wrap gap-3">
                                <button type="submit" name="convert_type" value="uppercase" class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 font-medium">
                                    转为大写
                                </button>
                                <button type="submit" name="convert_type" value="lowercase" class="bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300 font-medium">
                                    转为小写
                                </button>
                                <button type="submit" name="convert_type" value="capitalize" class="bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300 font-medium">
                                    首字母大写
                                </button>
                                <button type="submit" name="convert_type" value="sentence" class="bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300 font-medium">
                                    句首大写
                                </button>
                                <button type="submit" name="convert_type" value="toggle" class="bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300 font-medium">
                                    大小写互换
                                </button>
                                <button type="submit" name="convert_type" value="camel" class="bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300 font-medium">
                                    驼峰命名
                                </button>
                            </div>
                        
                    
                    <!-- 输入区域 -->
                    <div class="mb-6 mt-6">
                        <label class="block text-gray-700 font-medium mb-2">输入文本</label>
                        <textarea 
                            name="text_input"
                            class="w-full h-40 p-4 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                            placeholder="在此输入要转换的文本..."
                        >This is a sample text. It will be converted to uppercase. Each sentence starts with a capital letter.</textarea>
                        <div class="mt-2 flex justify-between text-sm">
                            <span class="text-gray-500">字符数: <span id="char-count">93</span></span>
                            <button type="button" id="clear-input" class="text-blue-600 hover:underline">清空</button>
                        </div>
                    </div>
                    </form>
                    
                    <!-- 输出区域 -->
                    <div class="mb-6">
                        <div class="flex justify-between mb-2">
                            <label class="block text-gray-700 font-medium">转换结果</label>
                            <div class="flex space-x-2">
                                <button id="copy-result" class="text-blue-600 hover:underline text-sm flex items-center">
                                    <i class="far fa-copy mr-1"></i> 复制
                                </button>
                                <button id="download-result" class="text-blue-600 hover:underline text-sm flex items-center">
                                    <i class="far fa-file-download mr-1"></i> 下载
                                </button>
                            </div>
                        </div>
                        <div class="w-full h-40 p-4 border border-gray-300 rounded-md bg-gray-50">
                            <pre id="result" class="whitespace-pre-wrap text-gray-800">THIS IS A SAMPLE TEXT. IT WILL BE CONVERTED TO UPPERCASE. EACH SENTENCE STARTS WITH A CAPITAL LETTER.</pre>
                        </div>
                    </div>
                    
                    <!-- 附加选项 -->
                    <div class="mb-6">
                        <div class="bg-gray-100 p-4 rounded-md">
                            <h3 class="font-medium text-gray-800 mb-3">高级选项</h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="flex items-center">
                                    <input type="checkbox" id="trim" class="h-4 w-4 text-blue-600">
                                    <label for="trim" class="ml-2 text-gray-700">删除首尾空格</label>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" id="normalize" class="h-4 w-4 text-blue-600">
                                    <label for="normalize" class="ml-2 text-gray-700">规范化Unicode字符</label>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" id="preserve_newlines" class="h-4 w-4 text-blue-600" checked>
                                    <label for="preserve_newlines" class="ml-2 text-gray-700">保留换行符</label>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" id="apply_to_selection" class="h-4 w-4 text-blue-600">
                                    <label for="apply_to_selection" class="ml-2 text-gray-700">仅转换选中部分</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 说明和帮助 -->
                    <div class="border-t border-gray-200 pt-6">
                        <h3 class="font-bold text-gray-800 mb-3">使用说明</h3>
                        <div class="text-gray-600 space-y-2">
                            <p>•&nbsp;&nbsp;转为大写：将所有字母转换为大写形式</p>
                            <p>•&nbsp;&nbsp;转为小写：将所有字母转换为小写形式</p>
                            <p>•&nbsp;&nbsp;首字母大写：将每个单词的首字母转换为大写</p>
                            <p>•&nbsp;&nbsp;句首大写：将每个句子的第一个字母大写</p>
                            <p>•&nbsp;&nbsp;大小写互换：大写变小写，小写变大写</p>
                            <p>•&nbsp;&nbsp;驼峰命名：将文本转换为驼峰命名格式</p>
                        </div>
                        
                        <div class="mt-6 bg-blue-50 p-4 rounded-md">
                            <h4 class="font-medium text-blue-800 mb-2">小贴士</h4>
                            <p class="text-blue-700 text-sm">
                                转换文本时，可以先选择文本的一部分，然后在"高级选项"中勾选"仅转换选中部分"，这样就可以只转换文本中的特定部分。
                            </p>
                        </div>
                    </div>
                </div>
                
                <!-- 相关工具 -->
                <div class="mt-8">
                    <h3 class="text-xl font-bold text-gray-800 mb-4">相关工具</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                        <a href="#" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                            <div class="bg-blue-500 w-2"></div>
                            <div class="p-4 flex-1">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-exchange-alt text-blue-600 mr-2"></i>
                                    <h3 class="font-bold">文本比较</h3>
                                </div>
                                <p class="text-gray-600 text-sm">比较两段文本的差异，突出显示不同之处</p>
                            </div>
                        </a>
                        
                        <a href="#" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                            <div class="bg-blue-500 w-2"></div>
                            <div class="p-4 flex-1">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-search-plus text-blue-600 mr-2"></i>
                                    <h3 class="font-bold">文本查找/替换</h3>
                                </div>
                                <p class="text-gray-600 text-sm">在文本中查找指定内容并替换</p>
                            </div>
                        </a>
                        
                        <a href="#" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                            <div class="bg-blue-500 w-2"></div>
                            <div class="p-4 flex-1">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-sort-alpha-down text-blue-600 mr-2"></i>
                                    <h3 class="font-bold">文本排序</h3>
                                </div>
                                <p class="text-gray-600 text-sm">按字母顺序或自定义规则排序文本行</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 计算字符数
        const textInput = document.querySelector('textarea[name="text_input"]');
        const charCount = document.getElementById('char-count');
        
        function updateCharCount() {
            charCount.textContent = textInput.value.length;
        }
        
        textInput.addEventListener('input', updateCharCount);
        
        // 清空按钮
        const clearButton = document.getElementById('clear-input');
        clearButton.addEventListener('click', function() {
            textInput.value = '';
            updateCharCount();
        });
        
        // 复制按钮
        const copyButton = document.getElementById('copy-result');
        const resultText = document.getElementById('result');
        
        copyButton.addEventListener('click', function() {
            const textToCopy = resultText.textContent;
            navigator.clipboard.writeText(textToCopy).then(function() {
                alert('文本已复制到剪贴板');
            }, function() {
                alert('复制失败，请手动复制');
            });
        });
        
        // 下载按钮
        const downloadButton = document.getElementById('download-result');
        
        downloadButton.addEventListener('click', function() {
            const textToDownload = resultText.textContent;
            const blob = new Blob([textToDownload], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            
            const a = document.createElement('a');
            a.href = url;
            a.download = '转换结果.txt';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        });
    });
</script>
{% endblock %} 